<template>
  <div class="brushcoupon">
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
      <div class="groupbox flex row_bet" style="margin-bottom: 18px">
        <div class="card_title">
          刷优惠券
        </div>
        <a-button type="primary" icon="plus" @click="drawershow = true" class="br4" style="margin:0 15px;">
          添加优惠券
        </a-button>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.cou_id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="cou_url" slot-scope="text,row">
          <div style="width:664px;" class="line-1">
            <a :href="row.cou_url" target="_blank">{{ row.cou_url }}</a>
          </div>
        </div>
        <div slot="cou_true_num" slot-scope="text,row">
          <a-progress :percent="parseInt((row.cou_true_num/row.cou_num)*100)" size="small" status="active"/>
        </div>
        <div slot="active" slot-scope="row">
          <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="dodel(row.cou_id)">
            <template slot="title">
              确认要删除吗?
            </template>
            <a-button type="link" style="color:red;">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </a-card>
    <a-drawer
      title="添加优惠券"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">券链接</div>
        <a-input v-model.number="form.coupon_url" placeholder="输入干净的券链接" class="chooseipt br4"/>
        <div class="titles">目标数量</div>
        <a-input v-model.number="form.cou_num" placeholder="目标领取数量，最好不要大于200个" class="chooseipt br4"/>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            :disabled="btnloading"
            style="float:left;"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'添加中...':'确 认 添 加' }}
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import { doaddcoupon, dodelcoupon, getcouponlist } from '@/api/couponApi'
  import moment from 'moment'

  export default {
    name: 'Brushcoupon',
    data () {
      return {
        moment,
        drawershow: false,
        form: {
          coupon_url: '',
          cou_num: ''
        },
        columns: [
          {
            title: '提交时间',
            align: 'center',
            dataIndex: 'cou_add_time',
            scopedSlots: {
              customRender: 'cou_add_time'
            }
          },
          {
            title: '券链接',
            align: 'center',
            width: 664,
            dataIndex: 'cou_url',
            scopedSlots: {
              customRender: 'cou_url'
            }
          },
          {
            title: '目标',
            align: 'center',
            dataIndex: 'cou_num',
            scopedSlots: {
              customRender: 'cou_num'
            }
          },
          {
            title: '进度',
            width: 200,
            align: 'center',
            dataIndex: 'cou_true_num',
            scopedSlots: {
              customRender: 'cou_true_num'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   cou_id: 146, // 自增id
          //   cou_user_id: 197, // 用户id
          //   cou_url: 'https://uland.taobao.com/quan/detail?sellerId=2434247916&activityId=bae3c09955e0466f9355a09bda8cdab2&pid=mm_0_0_0', // 优惠卷地址
          //   cou_add_time: '2020-04-10 09:05:50', // 创建时间
          //   cou_num: 312, // 目标领取数量
          //   cou_true_num: 174 // 已经领取数量
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getcouponlist(1, 15)
    },
    mounted () {
    },
    methods: {
      getUrl (urlstr, name) {
        // console.log('urlstr', urlstr,'name',name);
        const i = urlstr.indexOf('?')
        // console.log('i', i)
        if (i !== -1) {
          urlstr = urlstr.slice(i, urlstr.length) // ?id=xxxxx&a=xxx
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = urlstr.substr(1).match(reg)
          if (r != null) {
            return unescape(r[2])
          } else {
            return null
          }
        } else {
          return urlstr
        }
        // 使用 let id = this.getUrl(this.value,'id');//tips: id是string
      },
      onClose () {
        this.form = {}
        this.drawershow = false
      },
      dodel (id) {
        dodelcoupon({
          id: id
        }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getcouponlist(1, 15)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      dosubmit () {
        this.btnloading = true
        console.log(this.form)
        if (
          this.form.coupon_url !== '' &&
          this.form.cou_num !== ''
        ) {
          // https://uland.taobao.com/quan/detail?sellerId=2434247916&activityId=bae3c09955e0466f9355a09bda8cdab2
          const sellerId = this.getUrl(this.form.coupon_url, 'sellerId')
          const activityId = this.getUrl(this.form.coupon_url, 'activityId')
          const str = 'https://uland.taobao.com/quan/detail?sellerId=' + sellerId + '&activityId=' + activityId
          this.form.coupon_url = str
          console.log('str', str)
          doaddcoupon(this.form).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('添加成功!')
              this.getcouponlist(1, 15)
              this.drawershow = false
              this.form = {}
              this.btnloading = false
            } else {
              this.btnloading = false
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.info('请检查所需条件!')
          this.btnloading = false
        }
      },
      getcouponlist (page, pagesize, status, search) {
        this.loading = true
        getcouponlist({
          page: page,
          pagesize: pagesize,
          status: status, // 1未审批，2审批未打款，3已打款
          search: search
        })
          .then(res => {
            console.log(res)
            this.activity = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getcouponlist(params.page, 15)
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .brushcoupon {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      font-weight: 600;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-tbody {
      font-size: 13px;
    }
  }
</style>
